<template>
	<view>
		<u-navbar :border-bottom="false" title="我的钱包" back-icon-color="#333333" :background="{background:'#ffffff'}" title-color="#333333"></u-navbar>
		<view class="wallet_box">
			<view class="wall_cont">
				<view class="tit">总资产（积分）</view>
				<view class="body_cont">
					<view class="v1">{{contLists.sum}}.00</view>
					<view class="v2" @click="goCash()">
						<image src="../static/wallet_icon.png" class="wa_img"></image>
						<view class="tit_mini">提现</view>
						<u-icon name="arrow-right" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
				<view class="body_btom">
					<view>今日奖励 + {{contLists.addTotay}}</view>
					<view>累计奖励 + {{contLists.addTotal}}</view>
				</view>
			</view>
			<image src="../static/icon/wallbg.png" class="imgwall_bg"></image>
		</view>
		<view class="jf_box_wallet">
			<view class="jf_wallet_row" v-for="item in contLists.dictList" @click="gojifenlist(item)">
				<view class="v1" v-if="item.name=='邀请'"><image src="../static/icon/wall_icon01.png" mode="widthFix"></image></view>
				<view class="v1" v-if="item.name=='提现'"><image src="../static/icon/wall_icon02.png" mode="widthFix"></image></view>
				<view class="v1" v-if="item.name=='活动'"><image src="../static/icon/wall_icon03.png" mode="widthFix"></image></view>
				<view class="v1" v-if="item.name=='其他'"><image src="../static/icon/wall_icon04.png" mode="widthFix"></image></view>
				<view class="v2">
					<view class="v2_1">{{item.name}}</view>
					<view class="v2_2">
						<view v-if="item.integral != null">{{item.integral.reason}}</view>
						<view v-else>暂无操作</view>
					</view>
				</view>
				<view class="v3">
					<view class="v3_1">+{{item.sum}}</view>
					<view v-if="item.integral != null">{{item.integral.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var maxNum = 3, _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				contLists : {
					addTotal: 0,
					addTotay: 0,
					dictList: [],
					sum: 0
				},
	        }
	    },
		onShow() {
			this.getIntegralDetail();
		},
		onLoad(){
			_self = this;
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			getIntegralDetail : function(){
			    uni.request({
			    	url: this.serverUrl + 'app/getIntegralDetail',
			    	header: {
			    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			    	},
			    	method: 'POST',
			    	data: {
						memberId: this.userInfo.id,
			    	},
			    	success: (r) => {
						//console.log(r)
			    		if (r.data.code == 0) {
							console.log(r)
							this.contLists = r.data.data;
						}
					}
				})
			},
			goCash(){
				// 提现
				uni.navigateTo({
					url:'/pageB/general/cash/cash'
				})
			},
			gojifenlist(item){
				console.log(item,'goCash')
				let typemn = null;
				if(item.name == '邀请'){
					typemn = 1
				}else if(item.name == '提现'){
					typemn = 2
				}else if(item.name == '活动'){
					typemn = 3
				}else{
					typemn = 0
				}
				uni.navigateTo({
					url:'/newpage/qianbaolist?type='+typemn
				})
			}
		}
	}
</script>

<style lang="less">
	.wallet_box{
		height: 255rpx;
		margin: 30rpx;
		background-image: linear-gradient(270deg, 
			#4752e8 0%, 
			#4987ee 100%);
		box-shadow: 0rpx 12rpx 18rpx 0rpx 
			rgba(61, 77, 238, 0.2);
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 30rpx 0rpx 30rpx 30rpx;
		position: relative;
		.wall_cont{
			position: relative;
			z-index: 1;
		}
		.imgwall_bg{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%; 
		}
		.tit{
			font-size: 28rpx;
			color: #ffffff;
		}
		.body_cont{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.v1{
				font-size: 60rpx;
				color: #ffffff;
			}
			.v2{
				display: flex;
				width: 150rpx;
				height: 50rpx;
				background-image: linear-gradient(270deg, 
					#4752e8 0%, 
					#4987ee 100%);
				border-radius: 23rpx 0px 0px 23rpx;
				color: #ffffff;
				align-items: center;
				justify-content: center;
				.wa_img{
					width: 22rpx;
					height: 23rpx;
					margin-right: 10rpx;
				}
				.tit_mini{
					margin-left: 5rpx;
				}
			}
		}
		.body_btom{
			display: flex;
			color: #FFFFFF;
			justify-content: space-between;
			font-size: 28rpx;
			padding-top: 30rpx;
			padding-right: 30rpx;
		}
	}
	.jf_box_wallet{
		padding: 30rpx;
		.jf_wallet_row{
			height: 160rpx;
			background-color: #ffffff;
			box-shadow: 0px 0px 15rpx 0px 
				rgba(44, 49, 140, 0.11);
			border-radius: 10rpx;
			display: flex;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			align-items: center;
			margin-bottom: 25rpx;
			.v1{
				width: 70rpx;
				height: 70rpx;
				margin-right: 30rpx;
			}
			.v2{
				flex: 1;
				.v2_1{
					font-size: 32rpx;
					color: #373c40;
					margin-bottom: 10rpx;
				}
				.v2_2{
					font-size: 28rpx;
					color: #8d8d8d;
				}
			}
			.v3{
				font-size: 24rpx;
				color: #c3c3c3;
				padding-right: 10rpx;
				.v3_1{
					font-size: 32rpx;
					color: #ff1774;
					margin-bottom: 25rpx;
					text-align: right;
				}
				.v3_2{
					font-size: 32rpx;
					color: #b0b0b0;
					margin-bottom: 25rpx;
				}
				.v3_3{
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 25rpx;
				}
			}
		}
	}
</style>
